<template>
  <div>
    <!-- 头部导航 -->
    <!-- 插槽：是往组件里某个站位的位置，传入我们自己的标签替换进去显示
    使用：组件标签夹着的中间，指定传入template包裹传入的标签
    具名插槽：v-slot：名字   指定到某个插槽名字占位符的地方
    v-slot:名字   可以简写成  #名字 -->
  <van-nav-bar fixed>
  <template #left>
    <img class="logo" src="@/assets/logo.png" alt="">
  </template>
  <template #right>
        <van-icon name="search" size="0.48rem" color="#fff"/>
      </template>
  </van-nav-bar>

  <!-- 频道部分 -->
  <!-- van-tabs每个标签页导航（点击切换）
  title：导航上显示文字
  夹着的地方就是将来要显示切换的内容

  div要给一个padding-top让出顶部固定位位置 -->
<!-- 频道部分 -->
<van-tabs v-model="active" animated sticky offset-top="1.226667rem" color="#007bff">
    <van-tab v-for="item in userChannelList" :key="item.id" :title="item.name">
        <span>写内容 {{ item.name }}</span>
    </van-tab>
</van-tabs>
  </div>
</template>

<script>
import { getUserChanneListlAPI } from '@/api'
export default {
  name: 'HM_Home',
  data () {
    return {
      active: 0,
      userChannelList: [] // 用户已选频道列表
    }
  },
  created () {
    // 获取-用户已选的频道列表
    this.getUserChanneListFn()
  },
  methods: {
    // 获取-用户已选的频道列表
    async getUserChanneListFn () {
      const res = await getUserChanneListlAPI()
      console.log(res)

      // 嵌套解构赋值
      const { data: { data: { channels } } } = res
      this.userChannelList = channels
    }

  }

}
</script>

<style scoped lang="less">
.logo {
    width: 100px;
    height: 30px;
}
/* tab内容距离tab导航的距离 */
::deep .van-tabs__content{
    padding-top: 44px;
}
</style>
